<template>
	<view class="perview">
		<swiper class="item_list" @change="itemChange" :current="swiperInfo.index" @click="dou_back_home" @animationfinish="animationEnd">
			<swiper-item class="swiper-item" v-for="(item, index) in swiperInfo.source" :key="index">
				<view class="item" :style="{'overflow-x': item.file_type===0?'auto':'none'}">
					<image v-if="item.file_type === 0" :src="item.file_path" :style="{ width: '750rpx', height: 750 / item.file_ratio + 'rpx' }"
					 mode="widthFix"></image>
					<video v-else-if="index === index" :id="'preVideo' + index" :src="item.file_path" :poster="item.previewImage"
					 :enable-progress-gesture="false" @play="handleVideoPaly('preVideo' + index)" @fullscreenchange="handleVideoFull"
					 @ended="handleVideoEnd('preVideo' + index)" :style="{ width: '750rpx', height: 750 / item.file_ratio + 'rpx' }"></video>
				</view>
			</swiper-item>
		</swiper>
		<text class="index">{{ swiperInfo.index + 1 }}/{{ swiperInfo.maxIndex + 1 }}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_show: true,
				videoContext: null,
				swiperInfo: {
					index: 0,
					maxIndex: 0,
					source: []
				}
			};
		},
		onReady(e) {
			this.swiperInfo.source = uni.getStorageSync('previewFileArry');
			this.swiperInfo.index = parseInt(uni.getStorageSync('previewFileindex'));
			this.swiperInfo.maxIndex = this.swiperInfo.source.length - 1;
			uni.showToast({
				icon: 'none',
				title: '双击返回',
				duration: 1200
			});
			if (this.swiperInfo.source[this.swiperInfo.index].file_type === 1) {
				let videoObj = uni.createVideoContext('preVideo' + this.swiperInfo.index, this);
				videoObj.play();
				this.videoContext = videoObj;
			}




		},
		methods: {
			animationEnd() {
				this.is_show = true;
			},
			itemChange(e) {
				this.swiperInfo.index = e.detail.current;
				console.log(this.swiperInfo.index);

				if (this.videoContext) {
					this.videoContext.stop();
					this.is_show = false;
					if (this.swiperInfo.source[this.swiperInfo.index].file_type === 1) {
						let videoObj = uni.createVideoContext('preVideo' + this.swiperInfo.index, this);
						videoObj.play();
						this.videoContext = videoObj;
					}
				}
			},
			handleVideoPaly(id) {
				let videoObj = uni.createVideoContext(id, this);
				if (this.videoContext === videoObj) {
					return;
				}

				if (this.videoContext) {
					this.videoContext.stop();
				}
				this.videoContext = videoObj;
				this.videoContext.play();
			},
			dou_back_home() {
				console.log(this.lastTime);
				if (this.lastTime) {
					// 双击事件
					clearTimeout(this.lastTime);
					this.lastTime = null;
					if (this.videoContext) {
						this.videoContext.stop();
					}
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.lastTime = setTimeout(() => {
						this.lastTime = null;
					}, 300);
				}
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
			},
			end(e) {
				// 进度条安全区域
				let oky = (this.appInfo.windowHeight / 6) * 5;
				if (e.changedTouches[0].clientY > oky) {
					return;
				}

				// 滑动系数
				let subX = e.changedTouches[0].clientX - this.startData.clientX;
				let subY = e.changedTouches[0].clientY - this.startData.clientY;

				// 滑动判断
				if (subX > this.slipFactor) {
					// 右滑事件 前往前一个文件 index - 1
					if (this.swiperInfo.index < 1) {
						uni.showToast({
							title: '已经是第一个了',
							icon: 'none'
						});
						return;
					} else {
						// 可以执行
						if (this.swiperInfo.source[this.swiperInfo.index].file_type === 1) {
							let videoObj = uni.createVideoContext('preVideo' + this.swiperInfo.index, this);
							console.log(videoObj);
							videoObj.stop();
						}
						this.swiperInfo.index--;

						if (this.swiperInfo.source[this.swiperInfo.index].file_type === 1) {
							let videoObj = uni.createVideoContext('preVideo' + this.swiperInfo.index, this);
							videoObj.play();
						}
					}
				} else if (subX < -this.slipFactor) {
					// 左滑 前往后一个文件 index + 1
					if (this.swiperInfo.index >= this.swiperInfo.maxIndex) {
						uni.showToast({
							title: '已经是最后一个了',
							icon: 'none'
						});
						return;
					} else {
						if (this.swiperInfo.source[this.swiperInfo.index].file_type === 1) {
							console.log('进来了');
							console.log('preVideo' + this.swiperInfo.index);
							let videoObj = uni.createVideoContext('preVideo' + this.swiperInfo.index, this);
							videoObj.stop();
						}
						this.swiperInfo.index++;
						if (this.swiperInfo.source[this.swiperInfo.index].file_type === 1) {
							console.log('进来了');
							console.log('preVideo' + this.swiperInfo.index);

							let videoObj = uni.createVideoContext('preVideo' + this.swiperInfo.index, this);
							videoObj.play();
						}
					}
				} else {
					console.log('无效', subX);
				}
			},
			handleVideoFull(e) {
				console.log(e);
			},
			handleVideoEnd(id) {
				// 视频结束 重新播放
				console.log(id);
				let videoObj = uni.createVideoContext(id, this);
				videoObj.stop();
				videoObj.seek(0);
				videoObj.play();
			},
			blockOrFlex(file_ratio) {
				let windowHeight = this.appInfo.windowHeight;
				let windowWidth = this.appInfo.windowWidth;
				let imageHeight = windowWidth / file_ratio;
				if (windowHeight * 1.3 >= imageHeight) {
					return 'flex';
				}
				return 'block';
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: calc(100% - var(--status-bar-height));
	}

	.item_list {
		width: 100%;
		height: 100%;

		.swiper-item {
			width: 100%;
			height: 100%;
			flex-shrink: 0;
			align-items: center;
			flex-wrap: wrap;

			.item {
				width: 100%;
				height: 100%;
				align-items: center;
				flex-shrink: 0;
			}
		}
	}

	.perview {
		width: 100%;
		height: 100%;
		background-color: black;
		margin-top: var(--status-bar-height);
	}

	.items {
		width: 100%;
		height: 100%;
		flex-shrink: 0;
		align-items: center;
		flex-wrap: nowrap;

		.item {
			width: 100%;
			height: 100%;
			flex-shrink: 0;
		}
	}

	.show_items {
		width: 100% !important;
		height: 100%;
		flex-shrink: 0;
		align-items: center;
		display: flex;
	}

	image {
		height: 100%;
		width: 100%;
	}

	video {
		width: 100%;
		height: 100%;
		// max-height: 100%;
	}

	.index {
		position: fixed;
		top: 10rpx;
		left: 310rpx;
		color: white;
		background: #333333;
		display: inline-block;
		width: 130rpx;
		text-align: center;
		padding: 10rpx 0;
		border-radius: 15rpx;
		opacity: 0.5;
		z-index: 1000;
		margin-top: var(--status-bar-height);
	}
</style>
